import BaseFormField from "./BaseFormField"
import BaseTextInputItem from "@/components/composite/BaseTextInputItem"
import { useMemo, useState } from "react"
import BaseSelection from "@/components/composite/BaseSelection"
import Constants from "@/constants/kyc"
import BaseImageUploader from "@/components/composite/BaseImageUploader"
import { resolveAssetImage } from "@/utils/common"
import { createLogger } from "@/utils/logger"
import BaseBirthDayPicker from "@/components/composite/BaseBirthDayPicker"
import KycPageSignals from "@/features_signal/kycPageSignals"
const logger = createLogger("FormItemMap")

const FormItemMap = {
    IdType(props: { disabled?: boolean }) {
        const options = Constants.KycIdTypeOptions
        return (
            <BaseFormField
                label="ID Type"
                field="id_type"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "ID type is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("id_type", value as Kyc.IdType, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("id_type")
                    return (
                        <BaseSelection
                            label="ID Type"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={props.disabled || registration.disabled}
                            placeholder="Select your ID type"
                        />
                    )
                }}
            />
        )
    },
    Occupation() {
        const options = Constants.KycOccupationOptions
        return (
            <BaseFormField
                label="Occupation"
                field="occupation"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Occupation is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("occupation", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("occupation")
                    return (
                        <BaseSelection
                            label="Occupation"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your occupation"
                        />
                    )
                }}
            />
        )
    },
    MainSourceOfFunds() {
        const options = Constants.KycMainSourceOfFundsOptions
        return (
            <BaseFormField
                label="Main Source of Funds"
                field="source_of_income"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Main source of funds is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("source_of_income", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("source_of_income")
                    return (
                        <BaseSelection
                            label="Main Source of Funds"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your main source of funds"
                        />
                    )
                }}
            />
        )
    },
    NearestBranch() {
        const options = Constants.KycNearestBranchOptions
        return (
            <BaseFormField
                label="Nearest Branch"
                field="nearest_branch"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Nearest branch is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("nearest_branch", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("nearest_branch")
                    return (
                        <BaseSelection
                            label="Nearest Branch"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your nearest branch"
                        />
                    )
                }}
            />
        )
    },
    Gender() {
        const options = Constants.KycGenderOptions
        return (
            <BaseFormField
                label="Gender"
                field="gender"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Gender is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("gender", value as Kyc.Gender, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("gender")
                    return (
                        <BaseSelection
                            label="Gender"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your gender"
                        />
                    )
                }}
            />
        )
    },
    Nationality() {
        const options = Constants.kycCountryOptions.sort((a, b) => {
            if (a.label === "Philippines") {
                return -1
            }
            if (b.label === "Philippines") {
                return 1
            }
            return a.label.localeCompare(b.label)
        })
        return (
            <BaseFormField
                label="Nationality"
                field="nationality"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Nationality is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("nationality", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("nationality")
                    return (
                        <BaseSelection
                            label="Nationality"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your nationality"
                        />
                    )
                }}
            />
        )
    },
    PlaceOfBirth() {
        const options = Constants.KycPlaceOfBirthOptions.map((option) => ({
            value: option.label,
            label: option.label,
        }))
        return (
            <BaseFormField
                label="Place of Birth"
                field="place_of_birth"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Place of birth is required"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("place_of_birth", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("place_of_birth")
                    return (
                        <BaseSelection
                            label="Place of Birth"
                            options={options}
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            placeholder="Select your place of birth"
                        />
                    )
                }}
            />
        )
    },
    FirstName() {
        return (
            <BaseFormField
                label="First Name"
                field="first_name"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "First name is required"
                        }
                        if (!new RegExp(Constants.PhilippinesRealNameRegex).test(value)) {
                            return "Allowed characters: A-Z, a-z, space"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("first_name", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("first_name")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Enter your first name",
                                type: "text",
                                maxLength: 20,
                            }}
                        />
                    )
                }}
            />
        )
    },
    MiddleName() {
        const [hasMiddleName, setHasMiddleName] = useState(false)

        return (
            <BaseFormField
                label="Middle Name"
                field="middle_name"
                options={{
                    validate: (value) => {
                        if (hasMiddleName) {
                            if (!value) {
                                return "Middle name is required"
                            }
                            if (!new RegExp(Constants.PhilippinesRealNameRegex).test(value)) {
                                return "Allowed characters: A-Z, a-z, space"
                            }
                            return true
                        }
                        if (!value) {
                            return true
                        }
                        if (!new RegExp(Constants.PhilippinesRealNameRegex).test(value)) {
                            return "Allowed characters: A-Z, a-z, space"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("middle_name", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("middle_name")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Enter your middle name",
                                maxLength: 20,
                            }}
                        />
                    )
                }}
            />
        )
    },
    LastName() {
        return (
            <BaseFormField
                label="Last Name"
                field="last_name"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Last name is required"
                        }
                        if (!new RegExp(Constants.PhilippinesRealNameRegex).test(value)) {
                            return "Allowed characters: A-Z, a-z, space"
                        }

                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("last_name", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("last_name")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Enter your last name",
                                maxLength: 20,
                            }}
                        />
                    )
                }}
            />
        )
    },
    PhoneNumber() {
        return (
            <BaseFormField
                label="Phone Number"
                field="phone"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Phone number is required"
                        }
                        return true
                    },
                }}
                render={({ methods, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("phone", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("phone")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            inputProps={{
                                placeholder: "Enter your phone number",
                                type: "tel",
                                style: {
                                    fontFamily: "Roboto",
                                    letterSpacing: "0.5rem",
                                },
                            }}
                            prefix="🇵🇭+63"
                            disabled
                        />
                    )
                }}
            />
        )
    },
    CurrentAddress() {
        return (
            <BaseFormField
                label="Current Address"
                field="current_address"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Current address is required"
                        }
                        if (!new RegExp(Constants.PhilippinesAddressRegex).test(value)) {
                            return "Allowed characters: A-Z, a-z, space, comma, period"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("current_address", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("current_address")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Enter your current address",
                                maxLength: 100,
                            }}
                        />
                    )
                }}
            />
        )
    },
    PermanentAddress() {
        return (
            <BaseFormField
                label="Permanent Address"
                field="permanent_address"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Permanent address is required"
                        }
                        if (!new RegExp(Constants.PhilippinesAddressRegex).test(value)) {
                            return "Allowed characters: A-Z, a-z, space, comma, period"
                        }
                        return true
                    },
                }}
                render={({ methods, error, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("permanent_address", value, {
                            shouldValidate: true,
                        })
                    }
                    const currentValue = methods.watch("permanent_address")
                    return (
                        <BaseTextInputItem
                            value={currentValue}
                            onChange={setValue}
                            status={error?.message ? "error" : currentValue ? "valid" : undefined}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Enter your permanent address",
                                maxLength: 100,
                            }}
                        />
                    )
                }}
            />
        )
    },
    FrontPhotoOfId() {
        const originalData = KycPageSignals.sourceData.value.kyc
        return (
            <BaseFormField
                label="Front Photo of ID"
                field="attachments_idPhoto"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Front photo of ID is required"
                        }
                        return true
                    },
                }}
                render={({ methods, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("attachments_idPhoto", value, {
                            shouldValidate: true,
                        })
                    }
                    return (
                        <BaseImageUploader
                            value={methods.watch("attachments_idPhotoTmpUrl")}
                            onChange={setValue}
                            defaultValue={resolveAssetImage("kyc/sample_id.webp")}
                            disabled={!!originalData?.attachments_idPhoto || registration.disabled}
                            inputProps={{
                                placeholder: "Upload your front photo of ID",
                                accept: "image/jpeg, image/png, image/jpg",
                            }}
                        />
                    )
                }}
            />
        )
    },
    FacePhoto() {
        const originalData = KycPageSignals.sourceData.value.kyc
        return (
            <BaseFormField
                label="Face Photo"
                field="attachments_face"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Face photo is required"
                        }
                        return true
                    },
                }}
                render={({ methods, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("attachments_face", value, {
                            shouldValidate: true,
                        })
                    }
                    return (
                        <BaseImageUploader
                            value={methods.watch("attachments_faceTmpUrl")}
                            onChange={setValue}
                            defaultValue={resolveAssetImage("kyc/sample_face.webp")}
                            disabled={!!originalData?.attachments_face || registration.disabled}
                            inputProps={{
                                placeholder: "Upload your face photo",
                                accept: "image/jpeg, image/png, image/jpg",
                            }}
                        />
                    )
                }}
            />
        )
    },
    SelfieWithCard() {
        return (
            <BaseFormField
                label="Selfie with Card"
                field="attachments_selfieWithIDPhotoPath"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Selfie with card is required"
                        }
                        return true
                    },
                }}
                render={({ methods, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("attachments_selfieWithIDPhotoPath", value, {
                            shouldValidate: true,
                        })
                    }

                    return (
                        <BaseImageUploader
                            value={methods.watch("attachments_selfieWithIDPhotoPath")}
                            onChange={setValue}
                            defaultValue={resolveAssetImage("kyc/sample_face.webp")}
                            disabled={registration.disabled}
                            inputProps={{
                                placeholder: "Upload your selfie with card",
                                accept: "image/jpeg, image/png, image/jpg",
                            }}
                        />
                    )
                }}
            />
        )
    },
    DateOfBirth() {
        const originalData = KycPageSignals.sourceData.value.kyc
        return (
            <BaseFormField
                label="Date of Birth"
                field="birthday"
                options={{
                    validate: (value) => {
                        if (!value) {
                            return "Date of birth is required"
                        }
                        return true
                    },
                }}
                render={({ methods, registration }) => {
                    const setValue = (value: string) => {
                        methods.setValue("birthday", value, {
                            shouldValidate: true,
                        })
                    }
                    return (
                        <BaseBirthDayPicker
                            value={methods.watch("birthday")}
                            onChange={setValue}
                            defaultValue={originalData?.birthday}
                            disabled={registration.disabled}
                        />
                    )
                }}
            />
        )
    },
}

export default FormItemMap
